<template>
	<view :class="isArchives?'classArchives':''" >
		<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
	  <swiper    :duration="300" :current="tabBar.tabIndex" class="swiper-box" @change='swiperChange'>
	  	<swiper-item class="swiper-item"  catchtouchmove="false">
					<scroll-view scroll-y class="scroll-view">
						<view class="uni-flex up-photo-wrap zcAlignI_center zcJustifyC_between zcCustomPhoto" style="width: 100%;padding: 0 10upx;box-sizing: border-box;">
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img1.bgImag" :image="img1" :zcId="img1.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img2.bgImag" :image="img2" :zcId="img2.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img3.bgImag" :image="img3" :zcId="img3.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img4.bgImag" :image="img4" :zcId="img4.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img5.bgImag" :image="img5" :zcId="img5.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
              <zc-up-photo :isOne="true" :maxlength="1" :initBgImg="img6.bgImag" :image="img6" :zcId="img6.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
						</view>
						<!-- <view class="zcModel-title zcJustifyC_between">其他附件信息</view> -->
						<zc-up-photo  class="img8"  :image="img8" :maxlength="0" :zcId="img8.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
					</scroll-view>
	  	</swiper-item>
			<swiper-item class="swiper-item"  catchtouchmove="false">
				<scroll-view scroll-y class="scroll-view">
					<zc-up-photo class="img9"  :image="img9" :maxlength="0" :zcId="img9.id" @upImage="upImage" @rmImage="rmImage" ></zc-up-photo>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item"  catchtouchmove="false">
				<view v-if="dateImgs.length==0" class="uni-tab-bar-loading" style="text-align: center;">
					<view class="no_model">
						<image src="./../../static/no_data.png" mode="widthFix" style="width: 100%;"></image>
						<view class="no_text">暂无数据</view>
					</view>
				</view>
					<scroll-view scroll-y class="scroll-view">
						<view class="flex up-photo-wrap2 flexWrap f-side">
							<block v-for="(item,index) in dateImgs" :key="index" >
										<view class="up-photo2 zcRelative" >
											<view  class="imageWrap"> 
											  <image style="width: 100%;" :src="item.LUrl" mode="aspectFit"></image>
											</view>
											<view class="poto-text f-center"> 日期:{{item.UpLoadDate}}</view>
											<view class="f-center poto-text" style="margin-bottom: 20upx;">照片类型: {{item.YwType}}</view>
											<view class="imgfont icon-unie6b4 card_removeImg" @tap="rmImages2(index,item)"></view>
									</view>
							</block>
						</view>
					</scroll-view>
			</swiper-item>
	  </swiper>
	</view>
</template>

<script>
	let _this,
	swithObj={};
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	import zcUpPhoto from "../../components/zc-upPhoto/zc-upPhoto.vue"
	export default {
		components:{
			tabBar,
			zcUpPhoto
		},
		data() {
			return {
				tabBar:{
					tabIndex:0,
					tabBars:[
						{	name:'车辆档案'},
						{name:'车辆检查'},
						{name:'车辆日期'}
					]
				},
				img1:{
					id:1,
					bgImag:'../../static/car2.png',
					images:[],
					imgInfos:[]
				},
				img2:{
					id:2,
					bgImag:'../../static/car1.png',
					images:[],
					imgInfos:[]
				},
				img3:{
					id:3,
					bgImag:'../../static/car4.png',
					images:[],
					imgInfos:[]
				},
				img4:{
					id:4,
					bgImag:'../../static/car3.png',
					images:[],
					imgInfos:[]
				},
				img5:{
					id:5,
					bgImag:'../../static/car6.png',
					images:[],
					imgInfos:[]
				},
				img6:{
					id:6,
					bgImag:'../../static/car5.png',
					images:[],
					imgInfos:[]
				},
				img7:{
					id:7,
					bgImag:'../../static/car7.png',
					images:[],
					imgInfos:[]
				},
				img8:{
					id:8,
					bgImag:'../../static/car8.png',
					images:[],
					imgInfos:[]
				},
				img9:{
					id:9,
					bgImag:'../../static/car8.png',
					images:[],
					imgInfos:[]
				},
				img10:{
					id:10,
					bgImag:'../../static/car8.png',
					images:[],
					imgInfos:[]
				},
				checkImgs:[],
				dateImgs:[], //按日期显示
				imageDelete:"0",
				upImageRes:{}
			}
		},
		props:{
			isArchives:{
				type:Boolean,
				default:false
			},
			carSN:String
		},
		watch:{
			carSN(newV,oldV){
				console.log("carSNbianhua 变化");
				_this.getVehicleInfoFile();
			}
		},
		created(){
			_this = this;
			// setTimeout(()=>{
				_this.getVehicleInfoFile();
			// },500)
			swithObj={
				"1":{data:_this.img1,type:"行驶证正本"},
				"2":{data:_this.img2,type:"行驶证副本"},
				"3":{data:_this.img3,type:"驾驶证正本"},
				"4":{data:_this.img4,type:"驾驶证副本"},
				"5":{data:_this.img5,type:"身份证正面"},
				"6":{data:_this.img6,type:"身份证反面"},
				"7":{data:_this.img7,type:"其他"},
				"8":{data:_this.img8,type:"其他"},
				"9":{data:_this.img9,type:"其他"}
			};
		},
		mounted(){
			
		},
		methods: {
			//insertVehicleFile
			insertVehicleFile(upObj){  //上传添加图片
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'insertVehicleFile',
						Data:{
							obj:upObj
						}
					},
					Callback:_this.cb_insertVehicleFile,
					Scope: _this
				})
			},
			cb_insertVehicleFile(resJson,scope){
				 	console.log("上传信息调用接口",resJson)
					if(resJson.success){
						//_this.getVehicleInfoFile()
						if(resJson.data.LUrl){
							resJson.data.url = resJson.data.LUrl
						}
						swithObj[_this.upImageRes.id].data.images.push(resJson.data)
						console.log('8888',swithObj[_this.upImageRes.id].data.images);
						swithObj[_this.upImageRes.id].data.images = JSON.parse(JSON.stringify(swithObj[_this.upImageRes.id].data.images))
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			doDeleteVehicleFile(deleteArr){  //删除照片
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'doDeleteVehicleFile',
						Data:{
							obj:deleteArr
						}
					},
					Callback:_this.cb_doDeleteVehicleFile,
					Scope: _this
				})
			},
			cb_doDeleteVehicleFile(resJson,scope){
				 	console.log("删除",resJson)
					if(resJson.success){
						uni.showToast({
							title: '删除成功！'
						});
						if(_this.imageDelete =="0"){
							setTimeout(()=>{
							 swithObj[_this.rmImageRes.id].data.images.splice(_this.rmImageRes.index,1);
							 _this.getVehicleInfoFile()
						},1200)
						}else{
							setTimeout(()=>{
								_this.getVehicleInfoFile()
							},1200)
		
						}

					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			upImage(res) {
				console.log('upImage8 = ',res);
				_this.upImageRes = res
				function  UpObj(FileType){
					let _model = {
						"2":"按时间",
						"1":"检查类",
						"0":"基本信息"
					}
					this.PB_ComAttSN = res.imgInfos[res.imgInfos.length-1].PB_ComAttSN
					this.ModelType = _model[_this.tabBar.tabIndex]
					this.VehicleInfoSN = _this.carSN
					this.FileType = FileType //身份类型
				};
					//swithObj[res.id].data.images = res.images;
					swithObj[res.id].data.imgInfos = res.imgInfos;
					let _upObj = new UpObj(swithObj[res.id].type)
					console.log('_upObj',_upObj)
					_this.insertVehicleFile(_upObj)  //上传调用后台传入数据
			},
			rmImage(res) {
				_this.imageDelete="0";
				console.log('sc = ',res);
				_this.rmImageRes = res

				let deleteArr = [];
				res.image.images.forEach((item)=>{
						let _deleteArr={};
						_deleteArr.SN=res.image.images[res.index].SN;
						_deleteArr.TableName=res.image.images[res.index].TableName;
						deleteArr.push(_deleteArr)
				})
				_this.doDeleteVehicleFile(deleteArr)
			},
			rmImages2(index,item){
					_this.imageDelete="1";
				console.log(item);
			 let deleteArr = [];
				_this.dateImgs.forEach((item2)=>{
					if(item2.SN==item.SN){
						let _deleteArr={};
						_deleteArr.SN=item.SN;
						_deleteArr.TableName=item.TableName;
						deleteArr.push(_deleteArr)
					}
				})
				_this.doDeleteVehicleFile(deleteArr)
			},
				getVehicleInfoFile(){  //查询照片
				let _model = {
					"2":"按时间",
					"1":"检查类",
					"0":"基本信息"
				}
					_this.$ZcPublic.Server.Post({
						IsNeedLogin: true,
						Paras: {
							Name: 'Uni_Partner_Detail',
							Action: 'getVehicleInfoFile',
							Data: {
								SN:_this.carSN,
								ShowModel:_model[_this.tabBar.tabIndex]
							}
						},
						Callback:_this.cb_getVehicleInfoFile,
						Scope: _this
					})
				},
				cb_getVehicleInfoFile(resJson,scope){
					 	console.log("车辆照片信息2",resJson)
						if(resJson.success){
							switch(_this.tabBar.tabIndex){
								case 0 :
								_this.img8.images=[];
								let		swithObj2={
								"行驶证正本":{data:_this.img1,type:"1"},
								"行驶证副本":{data:_this.img2,type:"2"},
								"驾驶证正本":{data:_this.img3,type:"3"},
								"驾驶证副本":{data:_this.img4,type:"4"},
								"身份证正面":{data:_this.img5,type:"5"},
								"身份证反面":{data:_this.img6,type:"6"},
								}
								resJson.data.forEach((item,index)=>{

										if(item.FileType!="其他"){
											if(item.LUrl){
											swithObj2[item.FileType].data.images[0] = item;
											swithObj2[item.FileType].data.images[0].url = swithObj2[item.FileType].data.images[0].LUrl
										  }else{
                      swithObj2[item.FileType].data.images = []
											}
										}else{
											// if(item.LUrl){
											_this.img8.images.push(item);
											_this.img8.images.forEach((item)=>{
												 if(item.LUrl){
												item.url = item.LUrl
												}
											})
										// }
										}

									})
								break;
								case 1:
								_this.img9.images = resJson.data;
								_this.img9.images.forEach((item)=>{
									if(item.LUrl){
											item.url = item.LUrl
									}
								})
								break;
								case 2:
								_this.dateImgs = resJson.data;
								if(_this.dateImgs){
									_this.dateImgs.forEach((item)=>{
									if(item.UpLoadDate){
											item.UpLoadDate = _this.$ZcPublic.formatDate(item.UpLoadDate,'yyyy-MM-dd hh:mm:ss');
									}
								})
								}
								_this.img10_length = parseInt(_this.img10.images.length) - 1;
								console.log('_this.img10_length',_this.img10_length);
								break
							}
						}else{
								uni.showModal({
									title:'温馨提示',
									content: resJson.msg,
									showCancel:false
								})
						}
				},
			tapTab(e){
				_this.tabBar.tabIndex=e;
				_this.getVehicleInfoFile()
			},
			swiperChange(e){
				console.log(e);
				_this.tabBar.tabIndex=e.detail.current;
				// _this.getVehicleInfoFile()
			}
		}
	}
</script>

<style>
	.classArchives{
		/* margin-top: 80upx; */
	}
	.swiper-tab-list{width: 20%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
		.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
		.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 35%;bottom: 0;border-radius: 3upx;}
	.zc-swiper-tab{
		display: flex;
		border: none !important;
		width: 100%;
	}
	.swiper-tab-list {
		width: 33.3% !important;
	}
	.up-photo{
		/* width: 46%; */
		/* margin-left: 3.3%; */
		/* margin-top: 10upx; */
		/* color: #A0A0A0; */
	}
	.up-photo-wrap{
		flex-flow: wrap;
	}
	.poto-text{
		font-size: 24upx;
		color: #A3A1A1;
	}
	.card_img>view {
		border: none !important;
	}
	.swiper-box{
	position: absolute;
	top:90upx;
	bottom:0;
	width: 100%;
	overflow: auto;
	}
.classArchives .swiper-box{
	 	position: absolute;
	 top:170upx;
	 bottom:0;
	 width: 100%;
	 overflow: auto;
 }
	swiper{
	height: auto; 
	}
	.scroll-view{
		height: 100%;
	}
	/* 修改 */
	.up-photo-wrap{
		padding-right: 5upx;
		background-color: #fff;
		/* width: 100%; */
		box-sizing: border-box;
	}
		.up-photo-wrap>.image{
			border-top: 5upx solid #ccc;
			border-left: 5upx solid #ccc;
			flex: 0 0 33.3%;
			background-color: black;
			padding-top: 24%;
			box-sizing: border-box;
			background-size:contain ;
			background-repeat:no-repeat ;

		}
	zc-up-photo,.zcUpPhoto_name{
		flex: 0 0 48%;
	}
	.zcModel-title{padding: 20upx 20upx 0 20upx;display: flex;color: #999999;}
.card_img>view {
	flex: 0 0 48%;
}
.img8 .card_img{
	display: flex !important;
	justify-content: space-between !important;
}
.up-photo2{
		width: 46%;
}
.imageWrap{
	height: 220upx;
	/* width: 46%; */
	border: 1upx solid #ccc;
}
.imageWrap>image{
	width: 100%;
	height: 100%;
}
.up-photo-wrap2{
	padding: 20upx 20upx 0 20upx;
}
	.icon-unie6b4:before {
	  content: "\e675";
	  color: #FFFFFF;
	}
		@font-face {
		font-family: 'imgfont';  /* project id 1144889 */
		src: url('//at.alicdn.com/t/font_1144889_7ui2xip9obv.ttf') format('truetype');
	}
	
	.imgfont {
	  font-family: "imgfont" !important;
	  font-size: 12px;
	  font-style: normal;
		position: relative;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
		.card_removeImg{
		position: absolute!important;top: 0px;right: 0px;color: #F5F5F5;background-color: rgba(80,80,80,.4);border: none!important;font-size: 15px;padding: 0px 6px;margin: 0!important;border-radius: 0upx 0 0upx 10upx;
	}
</style>
